<template>
    <div v-bind:class="[activeClass,borderClass]"></div>
    <div v-bind:class="[isActive?activeClass:'',borderClass]"></div>
    <div v-bind:class="[{active:isActive},borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive=ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active{
    width: 100px;
    height: 10px;
    margin-bottom: 2px;
    background-color: rgb(59,192,241);
}
.border{
 border: 2px solid rgb(0,0,0);   
}
</style>